﻿@page "/breakpoints"

<h3>断点</h3>

<h4>断点是可自定义的宽度，它决定了响应式布局在 Bootstrap 中跨设备或视口大小的行为方式</h4>

<p>可用断点</p>

<div class="mb-2">
    Bootstrap 包括六个默认断点，有时称为网格层，用于响应式构建
</div>

<table class="table">
    <thead>
        <tr>
            <th>断点名称</th>
            <th>类后缀</th>
            <th>阈值</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>超小</td>
            <td><code>xs</code></td>
            <td>&lt; 576 像素</td>
        </tr>
        <tr>
            <td>小号</td>
            <td><code>sm</code></td>
            <td>&gt;= 576 像素</td>
        </tr>
        <tr>
            <td>中号</td>
            <td><code>md</code></td>
            <td>&gt;= 768 像素</td>
        </tr>
        <tr>
            <td>大号</td>
            <td><code>lg</code></td>
            <td>&gt;= 992 像素</td>
        </tr>
        <tr>
            <td>超大</td>
            <td><code>xl</code></td>
            <td>&gt;= 1200 像素</td>
        </tr>
        <tr>
            <td>特大</td>
            <td><code>xxl</code></td>
            <td>&gt;= 1400 像素</td>
        </tr>
    </tbody>
</table>

<div class="mt-3">组件内默认已经适配特大屏，很多默认都是 <code>xxl</code> 如 <code>Dialog</code> 默认弹窗大小为 <code>dialog-xxl</code></div>
